<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="800px"
    append-to-body
    destroy-on-close
    @close="handleClose"
  >
    <div class="modal-content">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="漏洞名称">{{ detailInfo.title }}</el-descriptions-item>
        <!-- <el-descriptions-item label="CVE编号">{{  }}</el-descriptions-item>
        <el-descriptions-item label="漏洞类型">{{ }}</el-descriptions-item>
        <el-descriptions-item label="危害等级">
        </el-descriptions-item> -->
        <el-descriptions-item label="发布日期">{{ detailInfo.create_time }}</el-descriptions-item>
        <!-- <el-descriptions-item label="影响范围">{{  }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="漏洞描述" :span="2">
          {{ }}
          </el-descriptions-item> -->
        </el-descriptions>
                
      <div class="details-section" v-if="detailInfo.res.cause_match">
        <div class="section-title">漏洞成因分析</div> 
        <div class="section-content">{{ detailInfo.res.cause_match }}</div>
      </div>
      
      <div class="code-section" v-if="detailInfo.res.code_match">
        <div class="section-title">漏洞代码片段</div>
        <el-card shadow="never" class="code-card">
          <pre><code>{{ detailInfo.res.code_match }}</code></pre>
        </el-card>
      </div>

      <div class="details-section" v-if="detailInfo.res.mechanism_match">
        <div class="section-title">漏洞机理分析</div>
        <div class="section-content">{{ detailInfo.res.mechanism_match }}</div>
      </div>

      <div class="details-section" v-if="detailInfo.res.impact_match">
        <div class="section-title">漏洞影响分析</div>
        <div class="section-content">{{ detailInfo.res.impact_match }}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  detailInfo: {
    type: Object,
    default: () => ({}),
  },
  title: {
    type: String,
    default: "查看",
  },
});
// 发出事件
const emit = defineEmits(["update:modelValue", "closed"]);

// 显示状态
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

</script>

<style scoped lang="scss">
.modal-content {
  padding: 20px;
  .details-section, .code-section {
      margin-top: 20px;
      
      .section-title {
        font-weight: bold;
        margin-bottom: 10px;
        color: var(--text-color);
      }
      
      .section-content {
        line-height: 1.6;
      }
    }
    
    .code-section {
      margin-top: 15px;

      .section-title {
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .code-card {
        background-color: var(--bg-color-secondary);
        pre {
          margin: 0;
          padding: 10px;
          overflow-x: auto;
          color: var(--text-color);
          code {
            font-family: monospace;
            color: inherit;
          }
        }
      }
    }
}
</style>